<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4" >
<head>
    <!--导入head配置-->
    <div th:include="admin/public/module :: head('修改文章')"></div>

    <!--    导入SimpleMDE图标，需要导入整个文件夹-->
    <link rel="stylesheet" type="text/css" th:href="@{/plugins/font-awesome-4.7.0/css/font-awesome.min.css}">
    <!--    导入SimpleMDE编辑器css-->
    <link rel="stylesheet" th:href="@{/plugins/simplemde/simplemde.min.css}">

    <!--    导入layui组件，优秀的弹窗框架-->
    <link rel="stylesheet" th:href="@{/plugins/layui-v2.6.8/layui/css/layui.css}">

    <!--    jquery.toast 提示框组件-->
    <link rel="stylesheet" type="text/css" th:href="@{/plugins/toast/jquery.toast.css}">
</head>
<body>


<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <div th:replace="admin/public/module :: leftNav"></div>
        <!--End 左侧导航-->

        <!--头部信息-->
        <div th:replace="admin/public/module :: headNav"></div>
        <!--End 头部信息-->

        <!--页面主要内容-->
        <main class="lyear-layout-content" style="background-color: rgb(229,229,229)">

            <div class="container-fluid">
                <form id="articleFrom" >
                    <input type="hidden" id="articleContent" name="articleContent">
                    <input type="hidden" id="articleContentMd" name="articleContentMd">
                    <input type="hidden" id="articleStatus" name="articleStatus">
                    <input type="hidden" id="articlePost" name="articlePost" value="post">
                    <div class="row">
                        <div class="col-md-8" style="min-height: calc(100vh);">
                            <input type="hidden" id="user" th:value="${session.user}">
                            <div class="form-group" >
                                <div class="shadow-sm p-3 mb-5 bg-white rounded">
                                    <input type="hidden" th:value="${article.id}" id="id" name="id">
                                    <input type="text" class="form-control" id="articleTitle" th:value="${article.articleTitle}" name="articleTitle"  placeholder="输入文章标题" >
                                </div>
                            </div>
                            <div class="form-group">
                                <textarea class="form-control" id="articleMd" th:text="${article.articleContentMd}" cols="30" rows="10"></textarea>
                            </div>
                        </div>
                        <div class="col-md-4" style="background-color: rgb(255,255,255);padding: 20px ">
                            <div class="tile">
                                <div class="form-group row">
                                    <label class="control-label col-md-3">作者:</label>
                                    <div class="col-md-9">
                                        <input type="text" class="form-control " th:value="${article.articleAuthor}" id="articleAuthor" name="articleAuthor" placeholder="作者" >
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="control-label col-md-3">编辑:</label>
                                    <div class="col-md-9">
                                        <input type="text" class="form-control " th:value="${article.articleEdit}" id="articleEdit" name="articleEdit"  placeholder="编辑" >
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="control-label col-md-3">文章类型:</label>
                                    <div class="col-md-9">
                                        <select name="articleType" class="form-control" th:value="${article.articleType}">
                                            <optgroup label="请选择" >
                                                <option th:selected="${article.articleType==0}"  value="0">原创</option>
                                                <option th:selected="${article.articleType==1}"  value="1">转载</option>
                                            </optgroup>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="control-label col-md-3">开启评论:</label>
                                    <div class="col-md-9">
                                        <select name="articleComment" class="form-control" th:value="${article.articleComment}">
                                            <optgroup label="请选择" >
                                                <option th:selected="${article.articleComment==0}" value="0">是</option>
                                                <option th:selected="${article.articleComment==1}" value="1">否</option>
                                            </optgroup>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="control-label col-md-3">文章略缩图：</label>
                                    <div class="col-md-9">
                                        <div class="input-group">
                                            <input type="hidden" class="form-control" th:value="${article.articleThumbnail}" id="articleThumbnail" name="articleThumbnail" readonly="readonly">
                                            <input type="text" class="form-control" th:value="${article.articleThumbnail}"  id="fileName" name="fileName" readonly="readonly">
                                            <span class="input-group-btn">

									<button class="btn btn-default " type="button" onclick="openChoice()">选择</button>
								</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="control-label col-md-3">文章摘要:</label>
                                    <div class="col-md-9">
                                        <textarea class="form-control" id="articleSummary" name="articleSummary" th:value="${article.articleSummary}" th:text="${article.articleSummary}" placeholder="请输入文章摘要" rows="3"></textarea>
                                    </div>
                                </div>
                                <div class="tile-footer">
<!--                                    <button type="button" class="btn btn-secondary" onclick="save(1)">保存草稿</button>-->

                                    <button class="btn btn-info pull-right" onclick="updateArticle(0)" type="button">重新发布</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </main>
        <!--End 页面主要内容-->
    </div>
</div>
>


<!--导入js-->
<div th:include="admin/public/module :: javascript"></div>
<!--   jquery -->
<script type="text/javascript" th:src="@{/plugins/vali/js/jquery-3.2.1.min.js}"></script>
<!--    导入SimpleMDE编辑器js-->
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
<!--    粘贴图片到编辑框上传-->
<script th:src="@{/plugins/inline-attachment/codemirror-4.inline-attachment.min.js}"></script>
<!--    导入layui组件，优秀的弹窗框架-->
<script th:src="@{/plugins/layui-v2.6.8/layui/layui.js}"></script>
<!--    jquery.toast 提示框组件-->
<script th:src="@{/plugins/toast/jquery.toast.js}"></script>
<script type="text/javascript">
    /*
    * $.toast({
                text: text,//消息提示框的内容。
                heading: heading,//消息提示框的标题。
                icon: icon,//消息提示框的图标样式。
                showHideTransition: 'fade',//消息提示框的动画效果。可取值：plain，fade，slide。
                allowToastClose: true,//是否显示关闭按钮。(true 显示，false 不显示)
                hideAfter: hideAfter,//设置为false则消息提示框不自动关闭.设置为一个数值则在指定的毫秒之后自动关闭消息提框
                stack: 1,//消息栈。同时允许的提示框数量
                position: 'top-center',//消息提示框的位置：bottom-left, bottom-right,bottom-center,top-left,top-right,top-center,mid-center。
                textAlign: 'left',//文本对齐：left, right, center。
                loader: true,//是否显示加载条
                //bgColor: '#FF1356',//背景颜色。
                //textColor: '#eee',//文字颜色。
                loaderBg: '#ffffff',//加载条的背景颜色。*/
    //实例化simplemde
    var simplemde = new SimpleMDE({
        element: document.getElementById("articleMd"),
        //如果设置为true，则强制下载Font Awesome（用于图标）。如果设置为false，则阻止下载。默认为undefined，将智能检查是否已包含Font Awesome，然后相应下载。
        autoDownloadFontAwesome:false,
        //如果设置为true，则自动对焦编辑器。默认为false。
        autofocus:true,
        // //自动保存
        // autosave:{
        //     //如果设置为true，则自动保存文本。默认为false。
        //     enabled:true,
        //     //保存之间的延迟，以毫秒为单位。默认为10000（10s）。
        //     delay:5000,
        //     //您必须设置唯一的字符串标识符，以便SimpleMDE可以自动保存。将此与您网站上其他地方的SimpleMDE实例区分开来的东西。
        //     uniqueId:"editor-1"
        // },
        //调整预览期间解析Markdown的设置
        renderingConfig:{
            ///如果设置为true，将使用highlight.js突出显示
            codeSyntaxHighlighting:true
        },
        //要显示的图标名称数组。可用于显示默认隐藏的特定图标，而无需完全自定义工具栏。
        showIcons: ["code", "table"],
        //如果设置，则自定义选项卡大小。默认为2。
        tabSize:4,
    });
    // //    获取编辑器的html
    // function getHtml() {
    //     var html = simplemde.value()
    //     var htmlStr = simplemde.markdown(html)
    //     console.log(html)
    //     alert(htmlStr)
    //     $("#showHtml").append(htmlStr)
    // }

    //选择略缩图
    function openChoice(){
        layer.open({
            type : 2,
            title : '所有附件',
            anim : 2,
            area : [ '90%', '90%' ],
            maxmin : true,
            shadeClose: true,
            content : "/goUploadView"  //通过请求打开附件视图
        });
    }
    //保存和发布文章
    function updateArticle(articleStatus){
        var contentMd=simplemde.value();
        var articleTitle  = $("#articleTitle").val()
        var articleAuthor = $("#articleAuthor").val()
        var articleEdit  = $("#articleEdit").val()
        var articleThumbnail = $("#articleThumbnail").val()
        var articleSummary = $("#articleSummary").val()
        var user = $("#user").val()
        if (user==''){
            window.location.href="/toLogin";
        }else if (articleTitle==''){
            $.toast({  // 依赖于 jquery.toast 提示框组件
                text : "请输入文章标题！",
                heading : '提示',
                showHideTransition : 'fade',
                allowToastClose : true,
                hideAfter : 2000,
                stack : 1,
                position : 'top-center',
                textAlign : 'left',
                loader : false,
                bgColor: '#585555',//背景颜色。
                textColor: '#eee',//文字颜色。

            });
            // showMsg("请输入文章标题！","error","3000");
        }else if(contentMd==""){
            $.toast({  // 依赖于 jquery.toast 提示框组件
                text : "请输入文章内容！",
                heading : '提示',
                showHideTransition : 'fade',
                allowToastClose : true,
                hideAfter : 2000,
                stack : 1,
                position : 'top-center',
                textAlign : 'left',
                loader : false,
                bgColor: '#585555',//背景颜色。
                textColor: '#eee',//文字颜色。

            });
            // showMsg("请输入文章内容！","error","3000");
        }else if(articleAuthor==""){
            $.toast({  // 依赖于 jquery.toast 提示框组件
                text : "请输入文章作者！",
                heading : '提示',
                showHideTransition : 'fade',
                allowToastClose : true,
                hideAfter : 2000,
                stack : 1,
                position : 'top-center',
                textAlign : 'left',
                loader : false,
                bgColor: '#585555',//背景颜色。
                textColor: '#eee',//文字颜色。

            });
            // showMsg("请输入文章作者！","error","3000");
        }else if(articleEdit==""){
            $.toast({  // 依赖于 jquery.toast 提示框组件
                text : "请输入文章编辑！",
                heading : '提示',
                showHideTransition : 'fade',
                allowToastClose : true,
                hideAfter : 2000,
                stack : 1,
                position : 'top-center',
                textAlign : 'left',
                loader : false,
                bgColor: '#585555',//背景颜色。
                textColor: '#eee',//文字颜色。

            });
            // showMsg("请输入文章编辑！","error","3000");
        }else if(articleThumbnail==""){
            $.toast({  // 依赖于 jquery.toast 提示框组件
                text : "选择文章略缩图！",
                heading : '提示',
                showHideTransition : 'fade',
                allowToastClose : true,
                hideAfter : 2000,
                stack : 1,
                position : 'top-center',
                textAlign : 'left',
                loader : false,
                bgColor: '#585555',//背景颜色。
                textColor: '#eee',//文字颜色。

            });
            // showMsg("选择文章略缩图！","error","3000");
        }else if(articleSummary==""){
            $.toast({  // 依赖于 jquery.toast 提示框组件
                text : "请输入文章摘要！",
                heading : '提示',
                showHideTransition : 'fade',
                allowToastClose : true,
                hideAfter : 2000,
                stack : 1,
                position : 'top-center',
                textAlign : 'left',
                loader : false,
                bgColor: '#585555',//背景颜色。
                textColor: '#eee',//文字颜色。

            });
            // showMsg("选择文章略缩图！","error","3000");
        }else{
            $("#articleContentMd").val(contentMd);
            $("#articleContent").val(simplemde.markdown(contentMd));
            $("#articleStatus").val(articleStatus);
            var obj=$("#articleFrom").serialize();
            // alert(obj)
            console.log(obj)
            $.ajax({
                type : "post",
                url : "/admin/updateArticle",
                data : obj,
                async: false,
                dataType : "json",
                success : function(data){
                    if ($("#articleStatus").val()==0){  //更新文章
                        // alert(data.articleTitle)
                        $.toast({  // 依赖于 jquery.toast 提示框组件
                            text : "发表成功！",
                            heading : '提示',
                            icon : 'success',
                            showHideTransition : 'fade',
                            allowToastClose : true,
                            hideAfter : 2000,
                            stack : 1,
                            position : 'top-center',
                            textAlign : 'left',
                            loader : true,
                            loaderBg : '#ffffff',
                            afterHidden : function() {
                                window.location.reload();
                            }
                        });
                    }else {   //保存草稿
                        // $.toast({  // 依赖于 jquery.toast 提示框组件
                        //     text : "文章已加入草稿箱！",
                        //     heading : '提示',
                        //     icon : 'success',
                        //     showHideTransition : 'fade',
                        //     allowToastClose : true,
                        //     hideAfter : 2000,
                        //     stack : 1,
                        //     position : 'top-center',
                        //     textAlign : 'left',
                        //     loader : true,
                        //     loaderBg : '#ffffff',
                        //     afterHidden : function() {
                        //         window.location.reload();
                        //     }
                        // });
                    }

                }
            });
        }
    }
</script>
</body>
</html>